import React,{useState,useImperativeHandle, forwardRef} from 'react';
import {
	Modal,Form,Input
} from 'antd';
import './view.less';

function ViewModal(props,ref){

    const [isModalVisible, setIsModalVisible] = useState(false);
    const [data, setData] = useState([]);

    useImperativeHandle(ref,()=>({
        showModal:(data)=>{
            setData(data);
            setIsModalVisible(true);
        }
    }))
  
    const handleOk = () => {
        setIsModalVisible(false);
		
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

	
		
    return (
      <Modal 
        title="预览" 
        visible={isModalVisible} 
        onOk={handleOk} 
        onCancel={handleCancel}
        width={1000}
        >
        <div className="dragContent" style={{width:'100%'}}>
        {data.map((item,index) =>(
            <div 
                key={item.id}
                className={
                    "lineText span" + item.span
                } 
               
            >
                {item.showTitle ? (<h4>{item.title}</h4>): null}
                <div className="input">
                    <Input  disabled={false}></Input>
                </div>
            </div>
        ))}
        </div>
      </Modal>
    )
}

export default forwardRef(ViewModal);